<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
			<el-form-item label="任务编号" prop="taskNum">
				<el-input placeholder="请输入任务编号" v-model="queryParams.taskNum" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="任务名称" prop="taskName">
				<el-input v-model="queryParams.taskName" placeholder="请输入任务名称" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			
			<el-form-item label="省" prop="province">
				<el-select v-model="queryParams.province" placeholder="请选择省" @change="chooseProvince" clearable value-key="id">
					<el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="市" prop="city">
				<el-select v-model="queryParams.city" placeholder="请选择市" @change="chooseCity" clearable value-key="id">
					<el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="区/县" prop="area">
				<el-select v-model="queryParams.area" placeholder="请选择县" @change="choosearea" clearable value-key="id">
					<el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleQuery">查询</el-button>
				<el-button @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<!--<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
			</el-col>
		</el-row>-->
		<!-- container表格区域 -->
		<el-table :data="listData" v-loading="loading" row-key="id" ref="tableRef" stripe @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
			<el-table-column label="任务编号" align="center" prop="taskNum" />
			<el-table-column label="任务名称" align="center" prop="taskName">
				<template #default="scope">
					<span @click="handleDetil(scope.row.dtId)" style="color: #409eff">{{
                  scope.row.taskName
              }}</span>
				</template>
			</el-table-column>
			<el-table-column label="使用模型" align="center" prop="">
				<template #default="scope">
					{{scope.row.algorithmType}}{{scope.row.operands}}
          <!--<div v-if="scope.row.operands == 1">场地评估-标贯法（饱和砂土或粉土）</div>
          <div v-if="scope.row.operands == 2">场地评估-标贯法（饱和黄土）</div>
          <div v-if="scope.row.operands == 3">场地评估-液化指数法（饱和砂土或粉土）</div>
          <div v-if="scope.row.operands == 4">场地评估-液化指数法（饱和黄土）</div>
          <div v-if="scope.row.operands == 5">区域评估-层次分析法</div>-->
        </template>
      </el-table-column>
			<el-table-column label="任务地区" align="center" prop="taskDistrict" show-overflow-tooltip/>
			<el-table-column label="操作" align="center" width="200px" class-name="small-padding fixed-width">
				<template #default="scope">
					<el-button type="text"  @click="analysis(scope.row)">评估</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows" @pagination="getList" />
   	<el-dialog v-model="openAnalysis" title="模型选择" width="600px" append-to-body>
   		<p></p>
   		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
		    <el-tab-pane label="场地评估-标贯法" name="first">
			    <el-row>
						<el-col :span="6" :offset="1">
				    	<el-radio-group v-model="radio">
						    <el-radio :label="1">饱和砂土或粉土<el-link type="primary" :underline="false" @click="formulaDesc1" style="font-size:14px;margin-left: 30px;">公式说明</el-link></el-radio>
						    <el-radio :label="2">饱和黄土<el-link type="primary" :underline="false" @click="formulaDesc2" style="font-size:14px;margin-left: 72px;">公式说明</el-link></el-radio>
						  </el-radio-group>
						</el-col>
					</el-row>
					<el-row>
						<el-col :offset='1' style="margin-top: 10px">所需数据为钻孔。</el-col>
					</el-row>
		    </el-tab-pane>
		    <el-tab-pane label="场地评估-液化指数法" name="second">
		    	<el-row>
						<el-col :span="6" :offset="1">
				    	<el-radio-group v-model="radio">
						    <el-radio :label="3">饱和砂土或粉土<el-link type="primary" :underline="false" @click="formulaDesc3" style="font-size:14px;margin-left: 30px;">公式说明</el-link></el-radio>
						    <el-radio :label="4">饱和黄土<el-link type="primary" :underline="false" @click="formulaDesc4" style="font-size:14px;margin-left: 72px;">公式说明</el-link></el-radio>
						  </el-radio-group>
						</el-col>
					</el-row>
					<el-row>
						<el-col :offset='1' style="margin-top: 10px">所需数据为钻孔。</el-col>
					</el-row>
		    </el-tab-pane>
		    <el-tab-pane label="区域评估-层次分析法" name="third">
		    	<el-row>
						<el-col :span="6" :offset="1">
		    			<el-radio v-model="radio" label="5">层次分析法<el-link type="primary" :underline="false" @click="formulaDesc5" style="font-size:14px;margin-left: 30px;">公式说明</el-link></el-radio>
		    		</el-col>
		    	</el-row>
					<el-row>
						<el-col :offset='1' style="margin-top: 10px">所需数据包括高程、地层岩性、水系、地震动峰值加速度。</el-col>
					</el-row>
		    </el-tab-pane>
		  </el-tabs>
   		<template #footer>
        <span class="dialog-footer">
          <el-button @click="confirm">确 定</el-button>
        </span>
      </template>
    </el-dialog> 
   	<!--查看任务详情-->
    <el-dialog v-model="openAdd" :title="title" width="800px" append-to-body>
			<div v-loading="viewLoading">
				<p class="dialogTitle">查看任务</p>
				<table class="addTask">                 
					<tr>
						<td colspan="2">
							<span class="label">任务编号：</span><span>{{ queryParamsAdd.taskNum }}</span>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<span class="label">任务名称：</span><span>{{ queryParamsAdd.taskName }}</span>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<span class="label">面积（平方公里）：</span>
							<!--<span>{{ queryParamsAdd.area }}</span>-->
							<el-link type="primary" :underline="false" @click="selectFeatureAll">查看</el-link>
						</td>
					</tr>
					<!--<tr>
						<td colspan="2">
							<span class="label">任务区域：</span><span class="init-taskDivSpan">{{ queryParamsAdd.taskRegion.substr(0,358) }}</span>
						</td>
					</tr>-->
					<tr>
						<td colspan="2">
							<span class="label">任务地区：</span><span class="init-taskDivSpan" v-if="title == '新建任务'">{{ taskDistrictName }}</span><span class="init-taskDivSpan" v-else>{{
									queryParamsAdd.taskDistrict
							}}</span>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<el-form :model="queryParamsAdd" :inline="true" label-width="140px">
								<el-form-item label="灾害类型：" prop="disasterType" style="width: 90%">
									<el-checkbox-group v-model="queryParamsAdd.disasterType">
									<el-checkbox label="1" :disabled="dzhpIsEdit">地震滑坡</el-checkbox>
									<el-checkbox label="2" :disabled="styhIsEdit">砂土液化</el-checkbox>
									<el-checkbox label="3" :disabled="rtzxIsEdit">软土震陷</el-checkbox>
								</el-checkbox-group>
								</el-form-item>
							</el-form>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<span class="label">评估人：</span><span>{{ queryParamsAdd.createUserName }}</span>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<span class="label">任务状态：</span>
							<span v-if="queryParamsAdd.taskStatus=='1'">进行中</span>
							<span v-if="queryParamsAdd.taskStatus=='2'">审核中</span>
							<span v-if="queryParamsAdd.taskStatus=='3'">退回修改</span>
							<span v-if="queryParamsAdd.taskStatus=='4'">已完成</span>
						</td>
					</tr>
				</table>
			</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelAdd">取 消</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="openMJ" title="面积查看" width="500px" append-to-body>
      <el-table id="tab" :data="tableData" style="text-align: center">
        <el-table-column prop="tdaName" label="区域" />
        <el-table-column prop="tdaArea" label="面积（平方公里）" />
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="exportExcel('tab')">导 出</el-button>
        </span>
      </template>
    </el-dialog>
		<el-dialog title="公式说明" v-model="openFormula1" width="900px" append-to-body>
			<p></p>
			<Formula1></Formula1>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="openFormula1 = false">关 闭</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog title="公式说明" v-model="openFormula2" width="900px" append-to-body>
			<p></p>	
			<Formula2></Formula2>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="openFormula2 = false">关 闭</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog title="公式说明" v-model="openFormula3" width="900px" append-to-body>
			<p></p>	
			<Formula3></Formula3>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="openFormula3 = false">关 闭</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog title="公式说明" v-model="openFormula4" width="900px" append-to-body>
			<p></p>	
			<Formula4></Formula4>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="openFormula4 = false">关 闭</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog title="公式说明" v-model="openFormula5" width="900px" append-to-body>
			<p></p>	
			<Formula5></Formula5>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="openFormula5 = false">关 闭</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script setup name="">
	import { getProvince, getChildArea } from "@/api/system/division";
	import Formula1 from "./formula1.vue"
	import Formula2 from "./formula2.vue"
	import Formula3 from "./formula3.vue"
	import Formula4 from "./formula4.vue"
	import Formula5 from "./formula5.vue"
	import {getTask,detailTask,viewTaskArea} from "@/api/sandliquidAssess/stAnalysisAssess";
	import FileSaver from "file-saver";
	import * as XLSX from "xlsx";
	
	const router = useRouter();
	const {
		proxy
	} = getCurrentInstance();
	const taskDistrictName = ref("");
	const props = {multiple: true};
	const modelName = ref("");
	const modelLabel = ref("");
	const taskDistrict = ref("");
	const taskId = ref("");
	const radio = ref(1);
	const openMJ = ref(false);
	const tableData = ref([]);
	const ids = ref([]);
	const single = ref(true);
	const multiple = ref(true);
	const openFormula1 = ref(false);
	const openFormula2 = ref(false);
	const openFormula3 = ref(false);
	const openFormula4 = ref(false);
	const openFormula5 = ref(false);
	const loading = ref(true);
	const provinceData = ref([]); //省
	const cityData = ref([]); //市
	const areaData = ref([]); //区、县
	const openAnalysis = ref(false);
	const openAdd = ref(false);
	const dzhpIsEdit = ref(false);
	const styhIsEdit = ref(false);
	const rtzxIsEdit = ref(false);
	const title = ref("");
	const activeName = ref("first");
	const total = ref(0);
	const delFlag = ref(false);

	const data = reactive({
		form: {
			taskDistrict: "",
		},
		selectProvince: [],
		listData: [],
		queryParams: {
			page: 1,
			rows: 10,
			taskNum: "",
			taskName: "",
			province: "",
			city: "",
			area: "",
		},
		queryParamsAdd: {
			taskYear: "",
			taskNum: "",
			taskName: "",
			taskArea: "",
			taskRegion: "",
			parentdistrictList: [],
			taskDistrict: "",
			groupName: "",
			groupLeader: "",
			groupId: "",
			groupLeaderId: "",
			regionCodes: "" //地图行政区划code,code字符串
		},
	});

	let {form,queryParams,listData,queryParamsAdd} = toRefs(data);

	//评估
  function analysis(row){
		taskDistrict.value = row.taskDistrict;
		taskId.value = row.dtId;
		var modelName = row.algorithmType + row.operands
		if(modelName == "场地评估-标贯法（饱和砂土或粉土）"){
			router.push({ 
		  	path: "/stAnalysisAssess/indexAssess1",
		  	query:{
		    	taskId: taskId.value,
					taskDistrict: taskDistrict.value,
					type:"1",
		      metaTitle: "饱和砂土或粉土标贯法"
		    }
		  })
		}else if(modelName == "场地评估-标贯法（饱和黄土）"){
			router.push({ 
		  	path: "/stAnalysisAssess/indexAssess1",
		  	query:{
		    	taskId: taskId.value,
					taskDistrict: taskDistrict.value,
					type:"2",
		      metaTitle: "饱和黄土标贯法"
		    }
		  })
		}else if(modelName == "场地评估-液化指数法（饱和砂土或粉土）"){
			router.push({ 
		  	path: "/stAnalysisAssess/indexAssess2",
		  	query:{
		    	taskId: taskId.value,
					taskDistrict: taskDistrict.value,
					type:"3",
		      metaTitle: "饱和砂土或粉土液化指数法"
		    }
		  })
		}else if(modelName == "场地评估-液化指数法（饱和黄土）"){
			router.push({ 
		  	path: "/stAnalysisAssess/indexAssess2",
		  	query:{
		    	taskId: taskId.value,
					taskDistrict: taskDistrict.value,
					type:"4",
		      metaTitle: "饱和黄土液化指数法"
		    }
		  })
		}else if(modelName == "区域评估-层次分析法"){
			router.push({ 
		  	path: "/stAnalysisAssess/indexAssess3",
		  	query:{
		    	taskId: taskId.value,
					taskDistrict: taskDistrict.value,
					type:"5",
		      metaTitle: "层次分析法"
		    }
		  })
		}else{
			openAnalysis.value = true;
		}
  }
  function confirm(){
  	if(radio.value == "1"){
			//饱和砂土或粉土标贯法
			router.push({ 
		  	path: "/stAnalysisAssess/indexAssess1",
		  	query:{
		    	taskId: taskId.value,
					taskDistrict: taskDistrict.value,
					type:"1",
		      metaTitle: "饱和砂土或粉土标贯法"
		    }
		  })
		}
  	if(radio.value == "2"){
			//饱和黄土标贯法
			router.push({ 
		  	path: "/stAnalysisAssess/indexAssess1",
		  	query:{
		    	taskId: taskId.value,
					taskDistrict: taskDistrict.value,
					type:"2",
		      metaTitle: "饱和黄土标贯法"
		    }
		  })
		}
  	if(radio.value == "3"){
			//饱和砂土或粉土液化指数法
			router.push({ 
		  	path: "/stAnalysisAssess/indexAssess2",
		  	query:{
		    	taskId: taskId.value,
					taskDistrict: taskDistrict.value,
					type:"3",
		      metaTitle: "饱和砂土或粉土液化指数法"
		    }
		  })
		}
  	if(radio.value == "4"){
			//饱和黄土液化指数法
			router.push({ 
		  	path: "/stAnalysisAssess/indexAssess2",
		  	query:{
		    	taskId: taskId.value,
					taskDistrict: taskDistrict.value,
					type:"4",
		      metaTitle: "饱和黄土液化指数法"
		    }
		  })
		}
  	if(radio.value == "5"){
			//层次分析法
			router.push({ 
		  	path: "/stAnalysisAssess/indexAssess3",
		  	query:{
		    	taskId: taskId.value,
					taskDistrict: taskDistrict.value,
					type:"5",
		      metaTitle: "层次分析法"
		    }
		  })
		}
  	openAnalysis.value = false;
  }
	const handleSelectionChange = (selection) => {
		ids.value = selection.map((item) => item.id);
		single.value = selection.length != 1;
		multiple.value = !selection.length;
		selection.forEach((item) => {
			if(item.taskStatus == "3" || item.taskStatus == "2") {
				delFlag.value = false;
			} else {
				delFlag.value = true;
			}
		});
	};
	/** 搜索按钮操作 */
	function handleQuery() {
		queryParams.value.page = 1;
		getList();
	}
	/** 重置按钮操作 */
	function resetQuery() {
		cityData.value = [];
		areaData.value = [];
		proxy.resetForm("queryRef");
		handleQuery();
	}
	/** 获取省列表 */
	function getProvinceData() {
		getProvince().then((response) => {
			provinceData.value = response.data;
		});
	}
	function chooseProvince(value) {
		queryParams.value.city = null;
		queryParams.value.area = null;
		queryParams.value.province = value.name;
		cityData.value = [];
		areaData.value = [];
		getChildArea(value.id).then((response) => {
			cityData.value = response.data;
		});
	}
	function chooseCity(value) {
		queryParams.value.city = value.name;
		queryParams.value.area = null;
		areaData.value = [];
		getChildArea(value.id).then((response) => {
			areaData.value = response.data;
		});
	}
	function choosearea(value) {
		queryParams.value.area = value.name;
	}
	function formulaDesc1() {
		openFormula1.value = true;
	}
	function formulaDesc2() {
		openFormula2.value = true;
	}
	function formulaDesc3() {
		openFormula3.value = true;
	}
	function formulaDesc4() {
		openFormula4.value = true;
	}
	function formulaDesc5() {
		openFormula5.value = true;
	}
	/** 获取列表操作 */
	function getList() {
		loading.value = true;
	  getTask(queryParams.value).then((response) => {
	    listData.value = response.data.rows;
	    loading.value = false;
	    total.value = response.data.total;
 		 });
	}
	/** 查看按钮操作 */
	const viewLoading = ref(true);
	function handleDetil(id) {
		title.value = "查看任务";
	  openAdd.value = true;
	  dzhpIsEdit.value = true;
	  styhIsEdit.value = true;
	  rtzxIsEdit.value = true;
		viewLoading.value = true
	  detailTask({ dtId: id }).then((response) => {
			viewLoading.value = false
	    queryParamsAdd.value = response.data;
	    if(response.data.disasterType!=""||response.data.disasterType!=null){
	    	queryParamsAdd.value.disasterType = response.data.disasterType.split(",");
	    }else{
	    	queryParamsAdd.value.disasterType = [];
	    }
	  }).catch(() => viewLoading.value = false)
	  viewTaskArea({ dtId: id }).then(response => {
	    tableData.value = response.data
	  })
	}
	function selectFeatureAll() {
	  openMJ.value = true
	}
	// 定义导出表格触发事件
	function exportExcel(tabid) {
	  const wb = XLSX.utils.table_to_book(document.querySelector('#' + tabid), {
	    raw: true // 如果表格里有数字、日期这些、需要加上raw: true
	  });
	  /* 获取二进制字符串作为输出 */
	  var wbout = XLSX.write(wb, {
	    bookType: 'xlsx',
	    bookSST: true,
	    type: 'array'
	  });
	  try {
	    FileSaver.saveAs(
	      // Blob 对象表示一个不可变、原始数据的类文件对象
	      new Blob([wbout], { type: 'application/octet-stream' }),
	      // 设置导出文件名称
	      "面积列表信息.xlsx"
	    );
	  } catch (e) {
	    if (typeof console !== 'undefined') console.log(e, wbout);
	  }
	  return wbout;
	}
	function resetAdd() {
		queryParamsAdd.value.taskYear = "";
		queryParamsAdd.value.taskNum = "";
		queryParamsAdd.value.taskName = "";
		queryParamsAdd.value.taskArea = "";
		queryParamsAdd.value.taskRegion = "";
		queryParamsAdd.value.taskDistrict = "";
		proxy.resetForm("rulesFormAdd");
	}
	// 取消
	function cancelAdd() {
		openAdd.value = false;
		resetAdd();
	}
	//切换标签页
	function handleClick(tab, event) {
    if(tab.props.name == "first"){
    	radio.value = 1;
    }else if(tab.props.name == "second"){
    	radio.value = 3;
    }else if(tab.props.name == "third"){
    	radio.value = "5";
    }
    modelName.value = tab.props.name;
    modelLabel.value = tab.props.label;
  }

	getList();
	getProvinceData();
</script>
<style scoped lang="scss">
	.area span.label {
		text-align: right;
		margin-right: 14px;
		display: inline-block;
		color: #606266;
		font-weight: 700;
		width: 30px;
	}
	
	.smallHeader {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #1890ff;
		position: relative;
		color: #fff;
		font-weight: 700;
	}
	
	.addTask,
	.addSubTask {
		width: 700px;
		margin: 0 auto;
		td {
			width: 350px;
			border:0px solid #c6c6c6;
		}
		.label {
			text-align: right;
			display: inline-block;
			color: #606266;
			font-weight: 700;
			height: 32px;
			width: 142px;
			padding-right: 14px;
		}
	}
	
	h3 {
		color: #333;
		height: 21px;
		font-size: 16px;
		line-height: 21px;
		display: flex;
		align-items: center;
		margin-left: 40px;
		span {
			margin-right: 12px;
			display: inline-block;
			width: 3px;
			height: 16px;
			background: #333;
		}
	}
	
	.areaDialog {
		text-align: center;
		.close {
			text-align: right;
			.el-icon {
				color: #606266;
				padding: 20px 0;
				margin-right: 10px;
				right: 0px;
				font-size: 22px;
			}
		}
		width: 320px;
		position: absolute;
		top: 270px;
		left: 320px;
		background: rgba($color: #fff, $alpha: 0.9);
	}
	.tab-title {
		font-size: 16px;
		font-weight: bold;
		border-left: 4px solid #0D9AFF;
		font-family: PingFangSC-Medium;
		padding-left: 10px;
		margin-bottom: 10px;
	}
	table td{
		border:1px solid #c6c6c6;
	}
</style>